<template>
	<view class="bui-vr-preview" style="background-color: aliceblue;">
		<canvas type="webgl" :id="id" :canvas-id="id" :style="{width: width, height:height}" :disable-scroll="true"
			@touchmove.prevent.stop="touchmove" @touchstart.prevent.stop="touchstart" @touchend.prevent.stop="touchend"
			@error="canvasIdErrorCallback"></canvas>
		<!-- <image src="https://jingmen.project.bigdatadh.cn/project/image/011668578735.jpg" mode=""></image> -->
		<!-- <image :src="img01" mode=""></image> -->
	</view>
</template>

<script>
	// fbudlr  
	import ImageAr from "./ImageAr.js";

	let images2 = [
		'https://cdn.huodao.hk/upload_img/20220620/c34262935511d61b2e9f456b689f5c1c.jpg',  // 后
		'https://cdn.huodao.hk/upload_img/20220620/722d2bf88f6087800ddf116511b51e73.jpg',  // 前
		'https://cdn.huodao.hk/upload_img/20220620/273081d1896fc66866842543090916d3.jpg', // 上
		'https://cdn.huodao.hk/upload_img/20220620/8747f61fd2215aa748dd2afb6dce3822.jpg',  // 下
		'https://cdn.huodao.hk/upload_img/20220620/3e532822bd445485d27677ca55a79b10.jpg',  // 左
		'https://cdn.huodao.hk/upload_img/20220620/cebf6fbcafdf4f5c945e0881418e34ec.jpg',  // 右
	]
	//  后 , 前 , 上, 下, 左, 右
	//  [ "back","front", "top","bottom", "left", "right"]
	// images1 是github中 G3D 的 demo Skybox 中的 6张图片
	let images  = [
		// 'https://gw.alicdn.com/tfs/TB1wcxqATtYBeNjy1XdXXXXyVXa-1024-1024.png',
		// 'https://gw.alicdn.com/tfs/TB1wcxqATtYBeNjy1XdXXXXyVXa-1024-1024.png',
		// 'https://gw.alicdn.com/tfs/TB1wcxqATtYBeNjy1XdXXXXyVXa-1024-1024.png',
		// 'https://gw.alicdn.com/tfs/TB1wcxqATtYBeNjy1XdXXXXyVXa-1024-1024.png',
		// 'https://gw.alicdn.com/tfs/TB1wcxqATtYBeNjy1XdXXXXyVXa-1024-1024.png',
		// 'https://gw.alicdn.com/tfs/TB1wcxqATtYBeNjy1XdXXXXyVXa-1024-1024.png',
		
		// 'https://cdn.huodao.hk/upload_img/20220620/c34262935511d61b2e9f456b689f5c1c.jpg',  // 后
		// 'https://cdn.huodao.hk/upload_img/20220620/722d2bf88f6087800ddf116511b51e73.jpg',  // 前
		// 'https://cdn.huodao.hk/upload_img/20220620/273081d1896fc66866842543090916d3.jpg', // 上
		// 'https://cdn.huodao.hk/upload_img/20220620/8747f61fd2215aa748dd2afb6dce3822.jpg',  // 下
		// 'https://cdn.huodao.hk/upload_img/20220620/3e532822bd445485d27677ca55a79b10.jpg',  // 左
		// 'https://cdn.huodao.hk/upload_img/20220620/cebf6fbcafdf4f5c945e0881418e34ec.jpg',  // 右
		
		'https://cdn.huodao.hk/upload_img/20220620/c34262935511d61b2e9f456b689f5c1c.jpg',  // 后
		'https://cdn.huodao.hk/upload_img/20220620/722d2bf88f6087800ddf116511b51e73.jpg',  // 前
		'https://cdn.huodao.hk/upload_img/20220620/273081d1896fc66866842543090916d3.jpg', // 上
		'https://cdn.huodao.hk/upload_img/20220620/8747f61fd2215aa748dd2afb6dce3822.jpg',  // 下
		'https://cdn.huodao.hk/upload_img/20220620/3e532822bd445485d27677ca55a79b10.jpg',  // 左
		'https://cdn.huodao.hk/upload_img/20220620/cebf6fbcafdf4f5c945e0881418e34ec.jpg',  // 右
	
		
		
		
	]

	export default {
		props: {
			/* canvas id, 同一页面多次引用,不可重名 */
			id: {
				type: String,
				default: "canvas_" + Math.round(Math.random() * 9999)
			},
			height: {
				type: String,
				default: "100vh"
			},
			/**
			 * 宽度 默认 100%
			 */
			width: {
				type: String,
				default: "100vw"
			}
		},
		data() {
			return {
				imagebox: null,
				inited: false,
			};
		},
		onShow() {
			// setTimeout(() => {
				this.$nextTick(() => {
					this.init()
				})
				
			// }, 20000)
		},

		methods: {

			init() {
				let self = this;
				let selector = uni.createSelectorQuery().select(`#${this.id}`);
				selector.node()
					.exec((res) => {
						const canvas = res[0].node
						this.imagebox = new ImageAr(canvas, images, {
							textureComplete: (e) => {
								console.log("eeeeeeeeeee", e);
								self.inited = true;
							}
						});
					})
			},
			canvasIdErrorCallback: function(e) {
				console.error("canvas 操作异常", e.detail.errMsg, e)
			},
			touchmove(e) {
				let self = this;

				if (!self.inited) return;
				this.imagebox.touchmove(e)
			},
			touchstart(e) {
				let self = this;

				this.imagebox.touchstart(e)


			},
			touchend(e) {
				let self = this;
				if (!self.inited) return;
				this.imagebox.touchend(e)
			},



		}
	}
</script>

<style lang="scss" scoped>

</style>
